{% extends '../_base.html' %}

{% block nav %} /discuss {% endblock %}

{% block title %}{{ _('New Topic') }}{% endblock %}

{% block head %}
    {% set __sidebar_right__ = true %}

<style>
.x-discuss-visible {
    display: block;
}
</style>

<script>
$(function () {
    var
        $form = $('#topic-form'),
        $name = $form.find('input[name=name]'),
        $content = $form.find('textarea[name=content]'),
        $cancel = $form.find('button.x-cancel'),
        htmleditor = UIkit.htmleditor($content.get(0), {
            mode: 'split',
            maxsplitsize: 600,
            markdown: true
        });
    $form.submit(function (e) {
        e.preventDefault();
        var
            name = $name.val().trim(),
            content = $content.val().trim();
        if (name === '') {
            return $form.showFormError('Please input title');
        }
        if (content === '') {
            return $form.showFormError('Please input content');
        }
        $form.postJSON('/api/boards/{{ board.id }}/topics', {
            name: name,
            content: content
        }, function (err, r) {
            if (err) {
                return;
            }
            location.assign('/discuss/{{ board.id }}');
        });
    });

    $cancel.click(function () {
        location.assign('/discuss/{{ board.id }}');
    });
});
</script>
{% endblock %}

{% block content %}

    <div class="uk-alert x-board-nav">
        <a href="/discuss">{{ _('Discuss') }}</a>
        /
        <a href="/discuss/{{ board.id }}">{{ board.name }}</a>
        /
        {{ _('New Topic') }}
    </div>

    <div class="uk-margin uk-clearfix">
        <a href="/discuss/{{ board.id }}" class="uk-button uk-float-left"><i class="uk-icon-arrow-left"></i> {{ _('Back') }}</a>
    </div>

    <form id="topic-form" class="uk-form uk-form-stacked">
        <legend>{{ _('New Topic') }}</legend>
        <fieldset>
            <div class="uk-alert uk-alert-danger uk-hidden"></div>
            <div class="uk-form-row">
                <label class="uk-form-label">Title:</label>
                <div class="uk-form-controls">
                    <input type="text" name="name" placeholder="Title" style="width:100%">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label">Content:</label>
                <div class="uk-form-controls">
                    <textarea name="content"></textarea>
                </div>
            </div>
            <div class="uk-form-row">
                <div class="uk-form-controls">
                    <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-check"></i> Post</button>
                    &nbsp;
                    <button type="button" class="uk-button x-cancel"><i class="uk-icon-times"></i> Cancel</button>
                </div>
            </div>
        </fieldset>
    </form>

{% endblock %}

{% block sidebar_right_content %}

{% endblock %}
